<%@ include file="/common/taglibs.jsp"%>
<!--分页查询共用的页面-->
<%@ include file="/common/common.jsp"%>
<%@ include file="/common/dateUtil.jsp"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<head>
    <script type="text/javascript" src="<%=jsPath%>/util/can_trend_util.js?v=8503028"></script><!--定时器-->

<style>
    /*画布容器样式*/
    #trend_cav_fa_div{
        width:100%;
        text-align:center;
        overflow: auto;
        flex:1;
        
    }
    .trend_toolTab_css {
        font-size: 13px;   
        width: 98%;
        /* background-color: rgb(251,251,251); */
    }
    .trend_toolTab_css tr{
        height: 28px;
        /* border:1px solid blue; */
    }
</style>

<script>

//////////////////////////////变量
var trend_info = {};
trend_info.debug = false;
trend_info.basData = {};        //基础数据对象
trend_info.basData.alarmDatas = [];     //基础报警数据
trend_info.basData.alarmDatasMap = {};  //基础报警数据map
trend_info.basData.activeSafeName = '主动安全报警';
trend_info.basData.maxValueNum = 40;    //趋势图数据点的最大数量，超过不获取并且提示
trend_info.basData.slctUrl = globalConfig.webPath + "/basicSlctAction//basicSelectData.action";
trend_info.basData.alarmValueHead = '报警数量';     //趋势图上报警数量前文字描述

trend_info.cache = {};          //查询数据缓存
trend_info.cache.selectIndex = 0;      //查询索引
trend_info.cache.alarmDatas = [];       //查询到的报警数据
trend_info.cache.timeList = [];         //查询时间列表

//////////////////////////////初始化数据
//初始化控件前，初始化数据
trend_info.initDataBeforeInitDivs = function(){
    this.getBasAlarmDatas();
}

//获取基础报警数据和map
trend_info.getBasAlarmDatas = function(){
    let that = this;
    this.basData.alarmDatas = [];
    this.basData.alarmDatasMap = {};
    let data = JSON.parse(window.localStorage.getItem("alarmSourceList"));
    if(!DataUtil.isDefined(data) && data.length > 0){
        this.basData.alarmDatas = data;
        //解析map
        $.each(data,function(n,item){
            let key = item.alarmSource + "_" + item.alarmType;
            that.basData.alarmDatasMap[key] = item;
        });
    }
}


//////////////////////////////初始化控件
//接口，初始化控件
trend_info.initDivs = function(){
    this.initDataBeforeInitDivs();

    this.initTimeDiv();
    this.initDepDiv();
    this.initAlarmSources();

    this.initCanvasDiv();
}

//初始化画布控件
trend_info.initCanvasDiv = function(){
    //趋势图样式容器
    let objFa = document.getElementById("trend_cav_fa_div");
    if (objFa != null) {
        this.outDebug("offsetWidth = " + objFa.offsetWidth + "  , clientWidth =" + objFa.clientWidth + " , style.width = " +  objFa.style.width)
        let width = parseInt(objFa.offsetWidth * 0.94);
        let height = parseInt(objFa.offsetHeight * 0.92);
        this.outDebug("cavpar -- >width = " + width + " , height = " + height);
        objFa.width = width;
        objFa.height = height;
        // objFa.style.border = '1px solid red';
        if (width > 0 && height > 0) {
            Can_Trend.init("trend_cav", width, height, '报警时间', '报警数量');
            Can_Trend.showTrendLine([]);
        }
    }
}

//初始化时间控件
trend_info.initTimeDiv = function(){
    $("#trend_startTime").datebox("setValue",Utility.now());
    $("#trend_endTime").datebox("setValue",Utility.now());
}

//初始化车组信息
trend_info.initDepDiv = function(){
    //创建下拉部门树
	Utility.createDepTree("trend_depId");
}

//初始化报警来源信息
trend_info.initAlarmSources = function(){
    let list = this.basData.alarmDatas;
    let data = [{name:'全部',value:''}];
    let tempList = [];
    if(list.length > 0){
        $.each(list,function(n,item){
            if(tempList.indexOf(item.alarmSourceName) < 0){
                tempList.push(item.alarmSourceName);
                let temp = {};
                temp.name = item.alarmSourceName;
                temp.value = item.alarmSource;
                data.push(temp);
            }
        });
    }
    //绑定数据
    $("#trend_alarmSource").combobox({
		textField: "name",
		valueField: "value",
		data: data,
        select: data[0].value,
        onSelect:trend_info.alarmSourceValueChange
	});
    trend_info.alarmSourceValueChange();
}


//////////////////////////////初始化数据
//接口，初始化数据
trend_info.initDatas = function(){

}



//////////////////////////////获取数据
//获取所有数据
trend_info.getAllData = function(){
    let that = this;
    //清除数据
    this.cache.timeList = [];
    this.cache.alarmDatas = [];


    let param = this.getSlctParam();
    this.formatSlctParam(param);
    //  this.outDebug("查询所需参数为：" , param);
    if(param.parseMsg == ''){
        //开始获取车辆列表数据
        param.queryId = "alarmSlct.selectVehDatas";
        Utility.getAjaxData(that.basData.slctUrl,JSON.stringify(param),function(data){
            that.outDebug("接收到车辆列表数据：" , data);
            if(data.success){
                param.vehList = that.formatSlctedVehList(data.data);
                if(!DataUtil.isDefined(param.vehList) && param.vehList.length > 0){
                    param.queryId = 'alarmSlct.selectAlarmNumsValue';
                    that.cache.selectIndex = 0;
                    that.getAlarmDataFromServer(param);//开始获取数据
                }
            }else{
                DataUtil.showErrorMsg(data.message);
            }
        });
    }else{
        DataUtil.showErrorMsg(param.parseMsg);
    }
}

//获取查询所需参数 
trend_info.getSlctParam = function(){
    let param = {parseMsg:''};
    try {
        let form = document.getElementById('trend_slctForm');
        let formData = new FormData(form);
        param = DataUtil.parseFormData2Obj(formData);
    } catch (error) {
        param.parseMsg = '解析查询参数失败：' + error;
    }
    
    return param;
}

//解析查询参数
trend_info.formatSlctParam = function(param){
    //解析校验报警类型
    if(!DataUtil.isDefined(param.alarmType)){
        let map = this.basData.alarmDatasMap;
        let alTemp = map[param.alarmType]; 
        if(!DataUtil.isDefined(alTemp)){
            param.alarmSource = alTemp.alarmSource;
            param.alarmType = alTemp.alarmType;
        }
    }
    //校验时间
    if(DataUtil.isDefined(param.startTime)){
       param.parseMsg += '开始时间不能为空！'; 
    }
    if(DataUtil.isDefined(param.endTime)){
        param.parseMsg += '结束时间不能为空';
    }

    //解析时间
    if(param.parseMsg == ''){
        let timeList = [];
        let start = new Date(param.startTime);
        let end = new Date(param.endTime);
        if (start > end) {
            param.parseMsg += '开始时间不得大于结束时间！';
        } else {
            //判断时间是否超过最大 天
            let num = this.basData.maxValueNum;

            let temp = (end.getTime() - start.getTime())/(1000 * 60 * 60 * 24);
            if( temp > num){
                param.parseMsg += '查询最大天数太多，不要超过 ' + num + " 天！"; 
            }else{//时间小于等于指定天数
                for (let i = 0; i < num; i++) {
                    let data1 = new Date(start.getTime());
                    data1.setDate(data1.getDate() + i);
                    if (data1 <= end) {
                        let startDateTemp = new Date(data1.getTime());
                        startDateTemp.setHours(0);
                        startDateTemp.setMinutes(0);
                        startDateTemp.setSeconds(0);
                        let endDateTemp = new Date(data1.getTime());
                        endDateTemp.setHours(23);
                        endDateTemp.setMinutes(59);
                        endDateTemp.setSeconds(59);
                        let obj = {
                            startDate:Utility.dateToString(startDateTemp),
                            endDate:Utility.dateToString(endDateTemp),
                            time:Utility.dateToString(startDateTemp,"yyyy-MM-dd")
                        };
                        timeList.push(obj);
                    }else{
                        break;
                    }
                }
            }

            if(timeList.length > 0){
                this.cache.timeList = timeList;
                Can_Trend.setPointNums(timeList.length);//初始化画布数量
            }else{
                param.parseMsg = '获取时间参数失败！' + param.parseMsg;
            }
        }
        //删除无用时间
        delete param.startTime;
        delete param.endTime;

    }

    //解析车组
    if(!DataUtil.isDefined(param.depId) && param.depId == '0'){
        delete param.depId;
    }

    //校验解析报警来源,报警来源为主动安全报警，并且报警类型不为全部，则获取报警来源列表
    if(!DataUtil.isDefined(param.alarmSource) && DataUtil.isDefined(param.alarmType)){
        let slctTxt = $("#trend_alarmSource").combobox('getText');
        if(slctTxt == trend_info.basData.activeSafeName){
            //所选报警为主动安全报警信息
            // param.parseMsg = '所选报警来源为主动安全报警';
            param.alarmSourceList = this.getActiveAlarmSourceList();
            delete param.alarmSource;
        }
    }
}

//获取主动安全报警来源列表
trend_info.getActiveAlarmSourceList = function(){
    let alarmSourceList = [];
    let list = this.basData.alarmDatas;
    let name = this.basData.activeSafeName;
    $.each(list,function(n,item){
        if(item.alarmSourceName == name){
            if(alarmSourceList.indexOf(item.alarmSource) < 0){
                alarmSourceList.push(item.alarmSource);
            }
        }
    });
    return alarmSourceList;
}

//解析查询到的车辆数据
trend_info.formatSlctedVehList = function(data){
    let list = [];
    if(data.length > 0){
        $.each(data,function(n,item){
            if(list.indexOf(item.vehicleId) < 0){
                list.push(item.vehicleId);
            }
        });
    }

    return list;
}



//从服务器获取报警数据
trend_info.getAlarmDataFromServer = function(param){
    let that = this;
    if(that.cache.selectIndex > -1){
        that.outDebug("当前查询索引为：" + that.cache.selectIndex);
        //设置参数
        if(that.cache.selectIndex < that.cache.timeList.length){
            delete param.startDate;
            delete param.endDate;
            param.startDate = that.cache.timeList[that.cache.selectIndex].startDate;
            param.endDate = that.cache.timeList[that.cache.selectIndex].endDate;
            param.time = that.cache.timeList[that.cache.selectIndex].time;
            this.outDebug("本次查询所需参数为：" , param);
            Utility.getAjaxData(that.basData.slctUrl,JSON.stringify(param),function(data){
                that.outDebug("接收到第" + that.cache.selectIndex + " 次查询结果" , data);
                if(data.success){
                    that.formatSlctAlarmNumDatas(data.data,param);
                }
                //继续获取下一个数据
                that.cache.selectIndex ++;
                that.getAlarmDataFromServer(param);
            });
            
            
        }
    }
}
//解析获取到的报警数据
trend_info.formatSlctAlarmNumDatas = function(data,param){
    if(data.length > 0){
        //查询到结果数据
        let temp = {};
        temp.text = param.time;
        if(!DataUtil.isDefined(data[0])){
            temp.value = data[0].alarmNums;
        }else{
            temp.value = 0;
        }
        // temp.valueHead = this.basData.alarmValueHead;
        temp.valueHead = '';
        this.cache.alarmDatas.push(temp);

    }else{
        //没有结果数据，即数量为0
        let temp  = {};
        temp.text = param.time;
        temp.value = 0;
        // temp.valueHead = this.basData.alarmValueHead;
        temp.valueHead = '';
        this.cache.alarmDatas.push(temp);
    }
    Can_Trend.showTrendLine(this.cache.alarmDatas);
}


//////////////////////////////控件事件
//报警来源控件选择事件
trend_info.alarmSourceValueChange = function(){
    let slctTxt = $("#trend_alarmSource").combobox('getText');
    let data = [{name:'全部',value:''}];
    let list = trend_info.basData.alarmDatas;

    // trend_info.outDebug("报警来源控件选择事件,选择的值为：" + slctTxt + " , list :" , list);

    if(slctTxt != '全部' && list.length > 0){//如果选择全部报警来源，报警类型为空
        $.each(list,function(n,item){
            if(item.alarmSourceName == slctTxt){
                let temp = {};
                temp.name = item.alarmTypeName;
                temp.value = item.alarmSource + "_" + item.alarmType;
                data.push(temp);
            }
        });
    }
    //绑定数据
    $("#trend_alarmType").combobox({
		textField: "name",
		valueField: "value",
		data: data,
        select: data[0].value,
	});

}


//////////////////////////////公共方法
trend_info.outDebug = function(msg,data){
    if(this.debug == true){
        DataUtil.outDebug(msg,data);
    }
}


//////////////////////////////加载后执行
$(document).ready(function(){
    trend_info.initDivs();
    // trend_info.getAllData();
});

</script>
</head>
<body style="width:98%;height:97%;background-color: rgb(251,251,251);" class="sh_css_basFontSize">
    <!--趋势最外层样式-->
    <div id="trend_fstPar_div" class="base_ver_spaceAroundDiv_css" style="width:98%;height:98%;">
        <!--查询参数工具栏-->
        <div style="width:100%;" class="base_ver_spaceAroundDiv_css">
            <form id="trend_slctForm" style="width:100%;" class="base_hori_flexCenterDiv_css">
                <table class="trend_toolTab_css">
                    <tr>
                        <td align="right">车牌号码&nbsp;&nbsp;</td>
                        <td><input type="text" id="trend_plateNo" name="plateNo" style="width:130px;"></td>
                        <td align="right">车组名称&nbsp;&nbsp;</td>
                        <td><select id="trend_depId" name="depId" style="width:130px;"></select></td>
                        <td align="right">报警来源&nbsp;&nbsp;</td>
					    <td> <select id="trend_alarmSource" name="alarmSource"  style="width:130px;"></select></td>
                        <td align="right">报警类型&nbsp;&nbsp;</td>
					    <td> <select id="trend_alarmType" name="alarmType" style="width:150px;"></select></td>
                    </tr>
                    <tr>
                        <td align="right">开始时间&nbsp;&nbsp;</td>
                        <td><input type="text" id="trend_startTime" name="startTime" class="easyui-datebox"  style="width:130px;" /></td>
                        <td align="right">结束时间&nbsp;&nbsp;</td>
                        <td align="left"><input type="text" id="trend_endTime" name="endTime" id="endTime" class="easyui-datebox"  style="width:130px;"/></td>
                        <td colspan="4" align="left">
                            <div class="base_hori_flexStartDiv_css">
                                &nbsp;&nbsp;
                                <!-- <a id="btnQuery" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="trend_info.getAllData();">查询</a> -->
                                <div id="btnQuery" class="sh_css_btn" onclick="trend_info.getAllData();">
                                    <div class="ui-icon icon-search" style="width:16px;height:16px;"></div>
                                    <span>查询</span>
                                </div>
                                &nbsp;
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div style="width:100%;height:40px;" class="base_hori_flexCenterDiv_css">
            <span style="font-size:19px;">报警数量趋势图</span>
        </div>
        <!--趋势图样式-->
        <div id="trend_cav_fa_div">
            <canvas id="trend_cav" style="vertical-align: middle;"></canvas>
        </div>
    </div>
    
</body>